<template>
  <div>
    <div class="toubudaohang flex ai-c">
      <el-radio-group v-model="tabPosition">
        <el-radio-button @click.native="$router.push('/layout/pointall')" label="pointall">积分统计</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/pointchange')" label="pointchange">积分变动记录
        </el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/operationLog')" label="operationLog">操作日志
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 积分统计 -->
    <div class="point-all-content">
      <!-- 积分统计左边内容 -->
      <div class="point-left">
        <p>
          <span>积分统计</span>
        </p>
        <div class="point-list">
          <div class="flex ai-c" v-for="(item, index) in groupingPoint" :key="index"
            :class="{ countBg: countPoint == index }" @click="chooseBg(index)">
            <img style="
                width: 14px;
                height: 14px;
                margin-right: 9px;
                margin-left: 4px;
              " src="@/assets/sanzhixiaosong.png" alt="" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <!-- 积分统计右边内容 -->
      <div class="point-right" v-show="rightContent === 0">
        <div class="point-top flex jc-sb ai-c">
          <div class="flex ai-c">
            <el-select v-model="name" clearable placeholder="请选择分组">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
            <div>
              <el-date-picker v-model="valuetime" align="right" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <el-button class="s-btn" @click="admindatagrouppage"></el-button>
            <!-- <el-button class="s-btn" @click="admindatagrouppage"></el-button> -->
          </div>

          <el-button class="btn-import" @click="admindatagroupexport">导出</el-button>
        </div>
        <div class="form-list-point">
          <el-table stripe :data="tableGrouping">
            <el-table-column prop="userGroupName" label="分组">
            </el-table-column>

            <el-table-column prop="scoreCard" label="总积分"> </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="page-point flex jc-c">
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                :current-page="pageNo" @current-change="currentchange">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>

      <!-- 按人员统计 -->
      <div class="point-right" v-show="rightContent === 1">
        <!-- <h2>按人员统计内容</h2> -->
        <div class="point-top-people flex jc-sb">
          <div class="flex ai-c">
            <el-input v-model="content" placeholder="请输入用户名、姓名搜索" class="search"></el-input>
            <div>
              <el-date-picker v-model="valuetimeperson" align="right" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <el-button class="s-btn" @click="admindatauserpage()"></el-button>
          </div>
          <el-button class="btn-import" @click="admindatauserexport">导出</el-button>
        </div>
        <div class="form-list-point">
          <template>
            <el-table stripe :data="tableData">
              <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="account" label="用户名" width="180"></el-table-column>
              <el-table-column prop="userGroupName" label="所属分组" width="180">
              </el-table-column>

              <el-table-column prop="scoreCard" label="总积分" align="center"></el-table-column>
              <el-table-column prop="" label=""> </el-table-column>
            </el-table>
          </template>
        </div>
        <!-- 分页 -->
        <div class="page-point flex jc-c">
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                :current-page="pageNo" @current-change="currentchange">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  admindatagrouppage,
  adminusergouplist,
  admindatauserpage,
  admindatagroupexport,
  admindatauserexport,
} from "@/api/index";
export default {
  data() {
    return {
      //   分组统计
      groupingPoint: [
        {
          name: "按分组统计",
        },
        {
          name: "按人员统计",
        },
      ],

      countPoint: 0,

      optionsChoose: [
        {
          valueChoose: "选项1",
          labelChoose: "请选择分组",
        },
      ],
      valueChoose: "",
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now()
        // },
      },
      value1: "",
      value2: "",
      value3: "",
      options: [
        {
          value: "选项1",
          label: "请选择分组",
        },
      ],
      tableGrouping: [],
      value: "",
      //   分页
      optionsPage: [
        {
          valuePage: "选项1",
          labelPage: "5条/页",
        },
      ],
      valuePage: "",
      optionsPagepeople: [
        {
          valuePagepeople: "选项1",
          labelPagepeople: "5条/页",
        },
      ],
      valuePagepeople: "",
      input: "",
      userInfo: {
        name: "",
        age: "",
        loaction: "",
        position: "",
        major: "",
      },
      pageNums: [
        {
          Numones: 5,
          numBers: "5条/页",
        },
        {
          Numones: 10,
          numBers: "10条/页",
        },
        {
          Numones: 15,
          numBers: "15条/页",
        },
      ],
      tableData: [],
      addUserclassdialogVisible: false,
      // 时间选择器
      valueone: "",
      countPoint: 0,
      isPoint: 0,
      total: 0,
      rightContent: 0,
      pointAll: 0,
      valuetime: "",
      valuetimeperson: "",
      pageNo: 1,
      pageSize: 5,
      name: "",
      content: "",
      tabPosition: "pointall",
    };
  },
  created() {
    this.alladmindatagrouppage();
    this.admindatagrouppage();
  },
  methods: {
    admindatagroupexport() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      admindatagroupexport({
        endTime: this.valuetime ? this.valuetime[1] : "",
        name: this.name,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.valuetime ? this.valuetime[0] : "",
      }).then((res) => {
        loading.close();
        window.open(res.data);
      });
    },
    admindatauserexport() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      admindatauserexport({
        endTime: this.valuetimeperson ? this.valuetimeperson[1] : "",
        content: this.content,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.valuetimeperson ? this.valuetimeperson[0] : "",
      }).then((res) => {
        loading.close();
        window.open(res.data);
      });
    },
    currentchange(val) {
      this.pageNo = val;
      if (this.rightContent == 0) {
        this.admindatagrouppage();
      } else {
        this.admindatauserpage();
      }
    },
    alladmindatagrouppage() {
      adminusergouplist().then((res) => {
        this.options = res.data;
      });
    },
    admindatauserpage() {
      console.log(this.valuetimeperson);
      admindatauserpage({
        endTime: this.valuetimeperson ? this.valuetimeperson[1] : "",
        content: this.content,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.valuetimeperson ? this.valuetimeperson[0] : "",
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    admindatagrouppage() {
      admindatagrouppage({
        endTime: this.valuetime ? this.valuetime[1] : "",
        name: this.name,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.valuetime ? this.valuetime[0] : "",
      }).then((res) => {
        this.tableGrouping = res.data.list;
        this.total = res.data.total;
      });
    },
    chooseBg(index) {
      this.countPoint = index;
      this.rightContent = index;
      if (index == 1) {
        this.pageNo = 1;
        this.admindatauserpage();
      } else {
        this.pageNo = 1;
        this.admindatagrouppage();
      }
    },

    // 查询
    queryClick(val) {
      this.multipleSelection = val;

      const input = this.input;
      if (input) {
        console.log("input输入的搜索内容：" + this.input);
        return this.tableData.filter((data) => {
          console.log("object:" + Object.keys(data));
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(input) > -1;
          });
        });
      }

      return this.tableData;
    },
  },

  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>

<style lang="scss" scoped>
// 积分统计
.point-all-content {
  margin: 24px auto;
  display: flex;
}

.point-left {
  width: 280px;
  // height: calc(100vh - 250px);
  // overflow: auto;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
  margin-right: 20px;

  p {
    color: #333333;
    font-size: 14px;
    font-weight: bold;
  }
}

.point-list {
  margin-top: 20px;
}

.point-list>div {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  cursor: pointer;
  color: #7f7f7f;
  margin-bottom: 15px;
}

.point-list .countBg {
  color: #ff5478;
  font-weight: bold;
  background-color: #fff3f5;
}

.point-right {
  width: calc(100% - 300px);
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
}

.btn-import {
  width: 96px;
  height: 40px;
  text-align: center;
  color: #ffffff;
  text-align: center;
  // border-radius: 5px;
  background-color: #ff5478;
  /* 不支持线性的时候显示 */
  background-image: linear-gradient(to left, #ff5478, #ff7aaf);
  align-items: center;
}

.point-right-people {
  width: 1000px;
  margin: 0 auto;
  padding-top: 40px;
}

.point-top-people {
  button:nth-of-type(1) {}

  button:nth-of-type(2) {}

  // .point-input {
  //   width: 227px;
  //   outline: none;
  //   margin-right: 20px;
  //   padding-left: 14px;
  //   border-radius: 3px;
  //   height: 40px;
  //   border: 1px solid rgba(220, 230, 234, 1);
  // }
}

.point-top-people input {
  margin-right: 20px;
}

.point-top {
  .point-input {
    width: 227px;
    outline: none;
    margin-right: 20px;
    padding-left: 14px;
    border-radius: 3px;
    height: 40px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}

.el-select {
  margin-right: 26px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  margin-right: 26px;
}

.el-button--primary {
  margin-right: 15px;
}

.form-list-point {
  // width: 810px;
  // margin: 0 auto;
  margin-bottom: 24px;
  border-radius: 3px;
  margin-top: 40px;
}

.search {
  width: auto;
  // width: 127px;
  margin-right: 20px;
}

.form-top {
  background-color: rgb(242, 242, 242);
}

td {
  font-size: 13px;
  color: #333333;
  height: 30px;
  //  padding-top: 5px;
  line-height: 30px;
  //     border-top:  1px solid red;
  // border: 1px solid #ebebeb;
}

// 分页
.page-point {
  // width: 853px;
  margin-bottom: 40px;
  margin-top: 40px;
}

.page-num {
  width: 50px;
  margin-top: 5px;
  // margin-right: 15px;
}

span {
  font-size: 14px;
}

.page-select {
  width: 126px;
  margin-top: -10px;

  input {
    height: 25px;
  }

  .el-input__inner {
    height: 25px;
  }
}

.page-select-people {
  width: 126px;
  margin-top: -10px;

  input {
    height: 21px;
  }
}

.go-page {
  width: 500px;
  margin-top: 5px;
  margin-left: 10px;

  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }
}

.el-input__icon {
  line-height: 21px !important;
}

.el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  text-align: center !important;
}

.go-page {
  width: 500px;
  margin-top: 5px;

  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }

  input {
    width: 35px;
    outline: none;
    border-radius: 3px;
    height: 25px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}

.el-input__icon {
  line-height: 21px !important;
}

.el-button--primary {
  margin-right: 0 !important;
}

.el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  text-align: center !important;
}

.page-numBer {
  margin-top: -2px;
}

.page-people {
  width: 853px;
  margin-bottom: 40px;
  display: flex;
  margin-left: 78px;
  justify-content: flex-start;
  margin-top: 40px;
}

.page-num-people {
  width: 50px;
}

.page-num-people span {
  font-size: 14px;
}
</style>
<style scoped lang="scss">
.toubudaohang {
  width: 100%;
  height: 84px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding-left: 30px;
  box-sizing: border-box;
}
</style>
<style scoped>
.s-btn {
  width: 61px;
  height: 40px;
  background-size: 19px 20px;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  border-radius: 5px;
  background-color: #ff5478;
  background-image: url("../assets/btnsearch.png");
}

.btn-import {
  width: 96px;
  height: 40px;
  color: #ffffff;
  text-align: center;
  border: none;
  border-radius: 5px;
  background-color: #ff5478;
  /* 不支持线性的时候显示 */
  background-image: linear-gradient(to left, #ff5478, #ff7aaf);
}
</style>